<template>
    <el-dialog v-model="lowCodeStore.createModelDialog.visible" title="创建模型" width="50%" :draggable="true"
        @close="handleClose(ruleFormRef)">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="model-ruleForm"
            :size="formSize" status-icon label-position="top">
            <el-form-item label="名称" prop="tableName" :rules="[
                {
                    required: true,
                    message: '请输入表名',
                    trigger: 'blur',
                },
            ]">
                <el-input v-model="ruleForm.tableName" />
            </el-form-item>
            <el-form-item label="描述" prop="tableDesc" :rules="[
                {
                    required: true,
                    message: '请输入描述文字',
                    trigger: 'blur',
                },
            ]">
                <el-input v-model="ruleForm.tableDesc" type="textarea" />
            </el-form-item>
            <el-form-item label="字段" required style="margin-bottom: 0"></el-form-item>
            <el-form-item class="fields-container">
                <el-form-item style="width: 100%; margin-bottom: 5px">
                    <el-col :span="2">序号</el-col><el-col :span="6">显示名称</el-col><el-col :span="1"></el-col><el-col
                        :span="6">字段名</el-col><el-col :span="1"></el-col><el-col :span="6">字段类型</el-col><el-col
                        :span="2" style="text-align: right">操作</el-col>
                </el-form-item>
                <el-form-item required v-for="(field, index) in ruleForm.fields" :key="field.key"
                    style="width: 100%; margin-bottom: 10px">
                    <el-col :span="2">{{ index + 1 }}</el-col>
                    <el-col :span="6">
                        <el-form-item :prop="'fields.' + index + '.fieldChineseName'" :rules="[
                            {
                                required: true,
                                message: '请输入显示名',
                                trigger: 'blur',
                            },
                        ]">
                            <el-input v-model="field.fieldChineseName" placeholder="显示名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col class="text-center" :span="6">
                        <el-form-item :prop="'fields.' + index + '.fieldEnglishName'" :rules="[
                            {
                                required: true,
                                message: '请输入字段名',
                                trigger: 'blur',
                            },
                        ]">
                            <el-input v-model="field.fieldEnglishName" placeholder="字段名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="6">
                        <el-form-item :prop="'fields.' + index + '.fieldType'" :rules="[
                            {
                                required: true,
                                message: '请选择类型',
                                trigger: 'change',
                            },
                        ]">
                            <el-select v-model="field.fieldType" placeholder="字段类型">
                                <el-option label="单行文本" value="shanghai" />
                                <el-option label="多行文本" value="beijing" />
                                <el-option label="下拉框" value="shanghai" />
                                <el-option label="计数器" value="beijing" />
                                <el-option label="开关" value="shanghai" />
                                <el-option label="日期" value="beijing" />
                                <el-option label="固定时间" value="shanghai" />
                                <el-option label="任意时间" value="beijing" />
                                <el-option label="单选" value="shanghai" />
                                <el-option label="多选" value="beijing" />
                                <el-option label="图片" value="shanghai" />
                                <el-option label="文件" value="beijing" />
                                <el-option label="图标选择" value="shanghai" />
                                <el-option label="描述框" value="beijing" />
                                <el-option label="链接" value="shanghai" />
                                <el-option label="网页" value="beijing" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"><svg class="icon" aria-hidden="true" @click.prevent="removeField(field)"
                            style="float: right; cursor: pointer">
                            <use xlink:href="#icon-minus_full"></use>
                        </svg></el-col>
                </el-form-item>
                <el-form-item style="width: 100%;">
                    <el-col :span="2"></el-col>
                    <el-col :span="22" style="display: flex; align-items: center;">
                        <svg class="icon" aria-hidden="true" @click.prevent="addField"
                            style="float: right; cursor: pointer">
                            <use xlink:href="#icon-xinzeng"></use>
                        </svg>
                        <el-button type="primary" link @click="addField">新增</el-button>
                    </el-col>
                </el-form-item>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)" size="small">重置</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="small">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from "vue";
import { ElMessageBox } from "element-plus";
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const formSize = ref("default");
const ruleFormRef = ref();

const ruleForm = reactive({
    tableName: "",
    tableDesc: "",
    fields: [
        {
            key: 1,
            value: "",
            fieldChineseName: "",
            fieldEnglishName: "",
            fieldType: "",
        },
    ],
});

const removeField = (item) => {
    const index = ruleForm.fields.indexOf(item);
    if (index !== -1) {
        ruleForm.fields.splice(index, 1);
    }
};

const addField = () => {
    ruleForm.fields.push({
        key: Date.now(),
        value: "",
        fieldChineseName: "",
        fieldEnglishName: "",
        fieldType: "",
    });
};

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm!");
            console.log(ruleForm);
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};

const handleClose = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();

    ruleForm.fields = [
        {
            key: 1,
            value: "",
            fieldChineseName: "",
            fieldEnglishName: "",
            fieldType: "",
        },
    ]

    lowCodeStore.createModelDialog.visible = false;
};
</script>

<style lang="less" scoped>
.fields-container {
    background: rgb(245, 246, 247);
    padding: 10px 20px;
}

.fields-container /deep/ .el-input__wrapper {
    background-color: rgb(255, 255, 255) !important;
    box-shadow: none !important;
}

.fields-container /deep/ .el-select__wrapper{
    box-shadow: none !important;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.model-ruleForm /deep/ .el-form-item__error {
    left: auto !important;
    right: 45px !important;
    top: 40% !important;
}
</style>
